<template>
	<view class="Jackpot">
		<view class="background">
			<view class="Jackpot-A">
				<view class="Jackpot-A-left">
					<image src="../../static/blood/Group54@2x.png" mode="" @click="back"></image>
					<text>第37轮</text>
				</view>
				<view class="Jackpot-A-right">
					<view></view>
					<text>跳过宝石支付确认</text>
				</view>
			</view>
			<view class="Jackpot-B">1814751</view>
			<view class="Jackpot-C">
				<view class="Jackpot-B-left">奖池</view>
				<view class="Jackpot-B-right">猴王逃跑即瓜分</view>
			</view>
			<view class="Jackpot-D">
				<image src="../../static/Jackpot/Group164@2x.png" mode="" ></image>
			</view>
		</view>
		<view class="banner">
			<view class="banner-header">猴王逃跑倒计时：00:00:05</view>
			<view class="banner-connent">
				<view class="banner-connent-left">
					<image src="../../static/Jackpot/Group122@2x.png" mode="" ></image>
					<text>32号猴王</text>
				</view>
				<view class="banner-connent-right">35377/1259431(2%)</view>
			</view>
			<view class="banner-bottom">倒计时结束后未炸死猴王，猴王则逃跑成功，逃跑后炸 过该猴王的人瓜分奖池，其中最后炸的人瓜分 10 %。</view>
		</view>
		<view class="straight">
			<image src="../../static/Jackpot/Group123@2x.png" mode=""  class="monkey"></image>
			<view class="straight-content">
				<view class="straight-left">
					<view class="straight-left-top">正6a66</view>
					<view class="straight-left-bottom">最后炸猴王</view>
				</view>
				<view class="straight-right">
					<view class="straight-right-top">猴王逃跑预计瓜分</view>
					<view class="straight-right-bottom">
					  <image src="../../static/Jackpot/ic_ape_stone10@2x.png" mode="" ></image>
						<text>1814751.3</text>
					</view>
				</view>
			</view>
		</view>
	  <view class="scope">
			<view class="scope-header">
				<view class="scope-header-left">炸过32号猴王的人</view>
				<view class="scope-header-right">猴王逃跑每个炸弹瓜分</view>
			</view>
			<view class="scope-content">
				<view class="scope-content-left"><text style="color:#F33F26FF;">541</text>人/共<text style="color:#F33F26FF;">1224054</text>炸弹</view>
				<view class="scope-content-right">
					<image src="../../static/Jackpot/ic_ape_stone10@2x.png" mode="" ></image>
					<text>1.33</text>
				</view>
			</view>
			<view class="scope-bottom">
				<view class="scope-bottom-first" v-for="item in 5" :key="item.id">
					<image src="../../static/Jackpot/Group148@2x.png" mode="" class="scope-bottom-first-header"></image>
					<view class="scope-bottom-first-connet">正***6</view>
					<view class="scope-bottom-first-bottom">
						<image src="../../static/Jackpot/Group124@2x.png" mode="" ></image>
						<text>3233</text>
					</view>
				</view>
			</view>
		</view>
		<view class="Carve-box">
			<view class="Carve">
				<image src="../../static/Jackpot/Group123@2x.png" mode=""  class="monkey"></image>
				<view class="Carve-content">
					<view class="Carve-left">
						<view class="Carve-left-top">我已炸32号猴王</view>
						<view class="Carve-left-bottom">
								<image src="../../static/Jackpot/Group124@2x.png" mode="" ></image>
								<text>0</text>
						</view>
					</view>
					<view class="Carve-right">
						<view class="Carve-right-top">猴王逃跑预计瓜分</view>
						<view class="Carve-right-bottom">
						  <image src="../../static/Jackpot/ic_ape_stone10@2x.png" mode="" ></image>
							<text>1.33</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			back(){
				uni.navigateBack(-1);
			},
		}
	}
</script>

<style lang="scss" scoped>
		.Jackpot{
			   width: 100%;
				 display: flex;
				 flex-direction: column;
				 align-items: center; 
				 .background{
					 width: 100%;
					 height: 555rpx;
					 padding-top: 112.6rpx;
					 background:url('../../static/Jackpot/Group167@2x.png');
					 background-size:cover;
					 .Jackpot-A{
						 height: 38rpx;
						 display: flex;
						 justify-content: space-between;
						 .Jackpot-A-left{
							 display: flex;
							 padding-left: 30rpx;
							 image{
								 width: 38rpx;
								 height: 38rpx;
								 padding-right: 20rpx;
							 }
							 text{
								 font-size: 31rpx;
								 font-family: PingFang SC, PingFang SC;
								 font-weight: 800;
								 color: #FFFFFF;
							 }
						 }
						 .Jackpot-A-right{
							 display: flex;
							 align-items: center;
							 padding-right: 30rpx;
							 
							 view{
								 width: 29rpx;
								 height: 29rpx;
								 background: rgba(16,16,16,0.31);
								 border-radius: 4rpx 4rpx 4rpx 4rpx;
								 opacity: 1;
								 border: 2rpx solid rgba(255,255,255,0.3);
								 margin-right: 10rpx;
							 }
							 text{
								 font-size: 23rpx;
								 font-family: PingFang SC, PingFang SC;
								 font-weight: 500;
								 color: rgba(255,255,255,0.5);
							 }
						 }
					 }
				   .Jackpot-B{
						 height: 110rpx;
						 display: flex;
						 justify-content: center;
						 align-items: center;
						 font-size: 92rpx;
						 font-family: Douyin Sans, Douyin Sans;
						 font-weight: bold;
						 color: #FCBF8E;
						 margin-top: 51rpx;
						 margin-bottom:8rpx;
					 }
					 .Jackpot-C{
						 display: flex;
						 justify-content: center;
						 align-items: center;
						 .Jackpot-B-left{
							 font-size: 31rpx;
							 font-family: PingFang SC, PingFang SC;
							 font-weight: 500;
							 color: #FFFFFF;
							 padding-right: 10rpx;
						 }
						 .Jackpot-B-right{
							 font-size: 23rpx;
							 font-family: PingFang SC, PingFang SC;
							 font-weight: bold;
							 color: #000000;
							 width: 177rpx;
							 height: 38rpx;
							 background: #FFFFFF;
							 border-radius: 10rpx 10rpx 10rpx 10rpx;
							 opacity: 1;
							 display: flex;
							 justify-content: center;
							 align-items: center;
						 }
					 }
					 .Jackpot-D{
						 display: flex;
						 justify-content: center;
						 image{
							 width: 689rpx;
							 height: 122rpx;
							 margin-top: 27rpx;
						 }
					 }
				 }
		  .banner{
					 width: 100%;
					 height: 305.34rpx;
					 background: linear-gradient(to right,#444444FF,#222222FF);
					 border-radius: 38.17rpx;
					 opacity: 1;
					 margin-top: -170rpx;
					 display: flex;
					 flex-direction: column;
					 align-items: center;
					 .banner-header{
						 width: 517rpx;
						 height: 80rpx;
						 background: linear-gradient(to right,#4B4B4BFF,#333333FF);
						 border-radius: 38.17rpx;
						 margin-top: -30rpx;
						 display: flex;
						 align-items: center;
						 justify-content: center;
						 z-index: 1;
						 font-size: 31rpx;
						 font-family: PingFang SC, PingFang SC;
						 font-weight: 800;
						 color: #FFFFFF;
						 line-height: 36rpx;
						 letter-spacing: 1px;
						 margin-bottom: 46rpx;
					 }
					 .banner-connent{
						 width: 90%;
						 height: 42rpx;
						 display: flex;
						 align-items: center;
						 justify-content: space-between;
						 font-size: 23rpx;
						 font-family: PingFang SC, PingFang SC;
						 font-weight: bold;
						 color: #FFFFFF;
						 background-color: #FFFFFF0A;
		
						 .banner-connent-left{
							 display: flex;
							 align-items: center;
							 image{
								 width: 67rpx;
								 height: 67rpx;
								 margin-right: 19rpx;
							 }
							 text{
								 font-size: 23rpx;
								 font-family: PingFang SC, PingFang SC;
								 font-weight: bold;
								 color: #FFFFFF;
							 }
						 }
						 .banner-connent-right{
							 font-size: 23rpx;
							 font-family: Douyin Sans, Douyin Sans;
							 font-weight: bold;
							 color: #FFFFFF;
							 padding: 20rpx;
						 }
					 }
				   .banner-bottom{
						 height: 73rpx;
						 font-size: 23rpx;
						 font-family: PingFang SC, PingFang SC;
						 font-weight: 500;
						 color: rgba(255,255,255,0.5);
						 line-height: 27rpx;
						 padding: 0 91.6rpx 0 91.6rpx;
						 margin-top: 70rpx;
					 }
				 }
		  .straight{
					 // width: 712rpx;
					 width: 96%;
					 height: 145rpx;
					 margin-top: 38rpx;
					 margin-bottom: 38rpx;
					 background: #FFFFFF;
					 border-radius: 19rpx 19rpx 19rpx 19rpx;
					 display: flex;
					 align-items: center;
					 justify-content: space-between;
					 .monkey{
						 width: 86rpx;
						 height: 86rpx;
						 opacity: 1;
						 border: 4rpx solid #FFFFFF;
						 margin-left: 21rpx;
						 margin-right: 21rpx;
					 }
					 .straight-content{
						 flex: 1;
						 display: flex;
						 justify-content: space-between;
						 .straight-left{
							 display: flex;
							 flex-direction: column;
							 justify-content: center;
							 .straight-left-top{
								 font-size: 27rpx;
								 font-family: PingFang SC, PingFang SC;
								 font-weight: bold;
								 color: #010101;
							 }
							 .straight-left-bottom{
								 width: 118rpx;
								 height: 42rpx;
								 background: #FF4E2D;
								 border-radius: 10rpx 10rpx 10rpx 10rpx;
								 font-size: 21rpx;
								 font-family: PingFang SC, PingFang SC;
								 font-weight: 500;
								 color: #FFFFFF;
								 text-align: center;
								 line-height: 42rpx;
								 margin-top: 5rpx;
							 }
						 }
						 .straight-right{
							 width: 300rpx;
							 display: flex;
							 flex-direction: column;
							 align-items: flex-end;
							 margin-right: 40rpx;
							 .straight-right-top{
								 font-size: 27rpx;
								 font-family: PingFang SC, PingFang SC;
								 font-weight: 500;
								 color: #010101;
							 }
							 .straight-right-bottom{
								 display: flex;
								 align-items: center;
								 image{
									 width: 36rpx;
									 height: 38rpx;
								 }	
									text{
										font-size: 40rpx;
										font-family: Douyin Sans, Douyin Sans;
										font-weight: bold;
										color: #F33F26;
										margin-top: 5rpx;
									}				 
							 }
						 }
					 }
				 }
		  .scope{
					 // width: 712rpx;
					 width: 96%;
					 height: 393rpx;
					 background: #FFFFFF;
					 border-radius: 19rpx 19rpx 19rpx 19rpx;
					 .scope-header{
						  display: flex;
							justify-content: space-between;
							font-size: 23rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							color: #010101;
							padding:32.44rpx 38rpx 23rpx 36rpx;
					 }
					 .scope-content{
						 display: flex;
						 justify-content: space-between;
						 align-items: center;
						 margin-bottom: 48rpx;
						 .scope-content-left{
							 width: 296rpx;
							 height: 40rpx;
							 background:#F5F5F5FF;
							 border-radius: 0rpx 19.08rpx 19.08rpx 0rpx;
							 color: #010101FF;
							 font-size: 22.9rpx;
							 text-align: center;
							 line-height: 40rpx;
						 }
						 .scope-content-right{
								 display: flex;
								 align-items: center;
								 margin-right: 40rpx;
								 image{
									 width: 36rpx;
									 height: 38rpx;
								 }	
									text{
										font-size: 40rpx;
										font-family: Douyin Sans, Douyin Sans;
										font-weight: bold;
										color: #F33F26;
										margin-top: 5rpx;
									}				 
							 }
					 }
				   .scope-bottom{
						 display: flex;
						 .scope-bottom-first{
							 flex: 1;
							 display: flex;
							 justify-content: center;
							 flex-direction: column;
							 align-items: center;
							 .scope-bottom-first-header{
								 width: 71rpx;
								 height: 71rpx;
								 border: 4rpx solid #FFFFFF;
							 }
							 .scope-bottom-first-connet{
								 width: 90rpx;
								 height: 27rpx;
								 background: #F5F5F5;
								 border-radius: 19rpx 19rpx 19rpx 19rpx;
								 opacity: 1;
								 font-size: 19rpx;
								 font-family: PingFang SC, PingFang SC;
								 font-weight: bold;
								 color: #010101;
								 display: flex;
								 justify-content: center;
								 align-items: center;
								 margin-top: -15rpx;
								 z-index: 1;
								 margin-bottom: 5rpx;
							 }
							 .scope-bottom-first-bottom{
								 display: flex;
								 align-items: center;
								 image{
									 width: 38rpx;
									 height: 38rpx;
								 }	
									text{
										font-size: 27rpx;
										font-family: Douyin Sans, Douyin Sans;
										font-weight: bold;
										color: #070707;
									}				 
							 }
						 }
					 }
				 }
		  .Carve-box{
					 width: 100%;
					 // height: 240rpx;
					 background: #FFFFFF;
					 display: flex;
					 align-items: center;
					 justify-content: center;
					 margin-top: -30rpx;
					 .Carve{
					 			 width: 712rpx;
					 			 // height: 112rpx;
					 			 margin-top: 38rpx;
					 			 margin-bottom: 38rpx;
					 			 background-color: #F4F4F4FF;
					 			 border-radius: 114.5rpx;
					 			 display: flex;
					 			 align-items: center;
					 			 justify-content: space-between;
					 			 .monkey{
					 				 width: 78.24rpx;
					 				 height: 78.24rpx;
					 				 opacity: 1;
					 				 border-radius: 4rpx solid #FFFFFF;
					 				 margin-left: 21rpx;
					 				 margin-right: 21rpx;
					 			 }
					 			 .Carve-content{
					 				 flex: 1;
					 				 display: flex;
					 				 justify-content: space-between;
					 				 .Carve-left{
					 					 display: flex;
					 					 flex-direction: column;
					 					 justify-content: center;
					 					 .Carve-left-top{
					 						 font-size: 23rpx;
					 						 font-family: PingFang SC, PingFang SC;
					 						 font-weight: bold;
					 						 color: #010101;
					 					 }
					 					 .Carve-left-bottom{
					 					 						 display: flex;
					 					 						 align-items: center;
					 											 justify-content: flex-start;
					 					 						 image{
					 					 							 width: 38rpx;
					 					 							 height: 38rpx;
					 					 						 }	
					 					 							text{
					 					 								font-size: 27rpx;
					 					 								font-family: Douyin Sans, Douyin Sans;
					 					 								font-weight: bold;
					 					 								color: #070707;
					 					 							}				 
					 					 }
					 				 }
					 				 .Carve-right{
					 					 width: 300rpx;  
					 					 display: flex;
					 					 flex-direction: column;
					 					 align-items: flex-end;
					 					 margin-right: 40rpx;
					 					 .Carve-right-top{
					 						 font-size: 23rpx;
					 						 font-family: PingFang SC, PingFang SC;
					 						 font-weight: bold;
					 						 color: #010101;
					 					 }
					 					 .Carve-right-bottom{
					 						 display: flex;
					 						 align-items: center;
					 						 image{
					 							 width: 36rpx;
					 							 height: 38rpx;
					 						 }	
					 							text{
					 								font-size: 38rpx;
					 								font-family: Douyin Sans, Douyin Sans;
					 								font-weight: bold;
					 								color: #F33F26;
					 								}
					 					 }
					 				 }
					 			 }
					 }
					 	 
				 }
		}
	
	 
	 
</style>
